<template>
  <div>
    <basic-container shadow="hover">
      <curd-title required :title="'主要联系人信息'" />
      <avue-crud
        :table-loading="loading"
        :option="option"
        :data="contactList"
        @on-load="onLoad"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @refresh-change="refreshChange"
        @row-del="handleDelete"
      >
      </avue-crud>
    </basic-container>
    <!-- 整体人员结构 -->
    <basic-container shadow="hover">
      <curd-title :title="'整体人员结构'" />
      <avue-crud
        :table-loading="staffLoading"
        :option="staffOption"
        :data="staffList"
        @on-load="onStaffLoad"
        @row-save="rowStaffSave"
        @row-update="rowStaffUpdate"
        @refresh-change="refreshStaffChange"
        @row-del="rowStaffDel"
      />
    </basic-container>
  </div>
</template>

<script>
import { contactOption, staffOption } from '@/option/tenant/supplier/contacts-info'
import CurdTitle from '@/components/base/title'
import { getList, add, update, remove } from '@/api/supplier/contact'
import { getStaff, addStaff, updateStaff, removeStaff } from '@/api/supplier/staff'

export default {
  name: 'ContactsInfo',
  components: { CurdTitle },
  inject: ['id'],
  data() {
    return {
      loading: false,
      contactList: [],
      option: contactOption.call(this),
      // 整体人员结构
      staffLoading: false,
      staffList: [],
      staffOption: staffOption.call(this)
    }
  },
  methods: {
    refreshChange() {
      this.onLoad()
    },
    onLoad() {
      this.loading = true
      getList({ supplierId: this.id }).then(res => {
        this.contactList = res.data.data.records
        this.loading = false
      })
    },
    rowSave(row, done, loading) {
      add({ ...row, supplierId: this.id }).then(
        () => {
          this.onLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    handleDelete(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
    },
    // ----整体人员结构----
    onStaffLoad() {
      this.staffLoading = true
      getStaff({ supplierId: this.supplierId }).then(res => {
        this.staffList = res.data.data.records
        this.staffLoading = false
      })
    },
    refreshStaffChange() {
      this.onStaffLoad()
    },
    rowStaffSave(row, done, loading) {
      addStaff({ ...row, supplierId: this.supplierId }).then(
        () => {
          this.onStaffLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowStaffUpdate(row, index, done, loading) {
      updateStaff(row).then(
        () => {
          this.onStaffLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowStaffDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return removeStaff(row.id)
        })
        .then(() => {
          this.onStaffLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
    }
  }
}
</script>

<style></style>
